<template>
    <div>
      <nav-top title="代理商详情" :show="true"></nav-top>
      <div class="playMain">
          <ul>
              <li>
                  <div class="mainItem clearfix">
                      <label class="fl">代理ID</label>
                      <input class="fl agentID" type="number" placeholder="请输入代理ID">
                  </div>
              </li>
          </ul>
          <div class="btn clearfix">
              <button class="sureSerach">查询</button>
          </div>
      </div>
      <div class="playList">
        <div class="mainItemlist" v-for="item in items">
          <div class="clearfix itemlistTop">
            <span class="fl">代理昵称</span>
            <b class="fr">{{value.nickName}}</b>
          </div>
          <ul class="itemlistBotttom">
            <li class="clearfix">
              <span class="fl">代理ID</span>
              <b class="fr">{{value.userId}}</b>
            </li>
            <li class="clearfix">
              <span class="fl">俱乐部总数</span>
              <b class="fr">{{value.clubNum}}</b>
            </li>
            <li class="clearfix">
              <span class="fl">创建时间</span>
              <b class="fr">{{value.createTime |yearDate}}</b>
            </li>
            <li class="clearfix">
              <span class="fl">购卡总数</span>
              <b class="fr">{{value.income}}</b>
            </li>
            <li class="clearfix">
              <span class="fl">房卡消耗</span>
              <b class="fr">{{value.fee}}</b>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  import NavTop from '../components/navTop.vue'

  export default {
    components: {NavTop},
    name: '',
    data () {
      return {
        items: {}
      }
    },
    mounted: function () {

    },
    computed: {},
    filters: {},
    methods: {}
  }
</script>
<style lang="less" scoped>
  // 代理的管理队长搜索
  .playMain{
    border-bottom:0.02rem solid #e8e8e8;
    padding-top:0.44rem;
    background-color: #ffffff;
    ul{
      border-top:0.02rem solid #e8e8e8;
      padding:0 0.22rem;
      li{
        border-bottom:0.02rem solid #e8e8e8;
        padding:0.13rem 0;
      }
      .mainItem{
        line-height:0.6rem;
        label{
          padding-right:0.04rem;
          width: 1.64rem;
        }
        input{
          width:4.2rem;
          height: 0.6rem;
          padding-left:0.1rem;
          border:none;
          background-color: #F2F2F4;
          box-shadow: inset 0 0px 0.03rem 0.03rem #E8E8E8;
          font-size:0.3rem;
          outline: none;
        }
        input:-ms-input-placeholder{text-align: center;}
        input::-webkit-input-placeholder{text-align: center;}
        input::-moz-placeholder { text-align: center; }
      }
    }
    .btn{
      padding: 0.13rem 0;
      border-bottom:0.02rem solid #e8e8e8;
      text-align: center;
      button{
        height:0.61rem;
        width:4.02rem;
        color: #fff;
        -webkit-border-radius: 0.08rem;
        -moz-border-radius: 0.08rem;
        border-radius: 0.08rem;
        outline: none;
        border:none;

      }
      .sureSerach{
        background-color: #00B01E ;
      }
    }
  }
  // 代理的管理队长搜索后的列表
  .playList{
    margin-top:0.3rem;
    color: #9B9B9B;
    .mainItemlist{
      margin-bottom:0.13rem;
      padding:0 0.22rem;
      background-color: white;
      .itemlistTop{
        height:0.85rem;
        line-height:0.85rem;
        border-bottom:0.02rem solid #e8e8e8;
      }
    }
    .itemlistBotttom{
      padding:0.14rem 0 0.11rem 0;
      li{
        line-height: 0.6rem;
      }
    }
  }
</style>
